import React, { Component } from 'react';
import { connect } from 'dva';
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Popconfirm,
  Divider,
  Input,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Radio,
  Badge,
  Select,
} from 'antd';
import { Stage, Layer, Text, Image, Line, Label, Tag, Rect } from 'react-konva';
import OrderForm from './hdForms/OrderForm.js';
import WorkingInfoForm from './hdForms/WorkingInfoForm.js';
import CircleState from './CircleState.js';

@connect(({ produce }) => ({ produce }))
class TwoBoxesHandImage extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };
  componentDidMount() {
    this._isMounted = true;
    const image = new window.Image();
    image.src = this.props.produce.handTwoBoxesSrc;
    image.onload = () => {
      if (this._isMounted) {
        this.setState({
          image: image,
        });
      }
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.produce.handTwoBoxesSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }

  render() {
    return (
      <Image
        image={this.state.image}
        width={this.state.image ? this.state.image.width : 1000}
        height={this.state.image ? this.state.image.height : 1650}
      />
    );
  }
}

// 做首板的时候弹出来的切线图
@connect(({ produce }) => ({ produce }))
class CutLineImage extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };
  componentDidMount() {
    this._isMounted = true;
    const image = new window.Image();
    image.src = this.props.produce.cutLineSrc;
    image.onload = () => {
      if (this._isMounted) {
        this.setState({
          image: image,
        });
      }
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.produce.cutLineSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }

  render() {
    return (
      <Image
        image={this.state.image}
        width={this.state.image ? this.state.image.width : 1000}
        height={this.state.image ? this.state.image.height : 1650}
      />
    );
  }
}

@connect(({ produce }) => ({ produce }))
class TotalBoardImage extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };
  componentDidMount() {
    this._isMounted = true;
    const image = new window.Image();
    image.src = this.props.produce.totalBoardSrc;
    image.onload = () => {
      if (this._isMounted) {
        this.setState({
          image: image,
        });
      }
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.produce.totalBoardSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }

  render() {
    return (
      <Image
        image={this.state.image}
        width={this.state.image ? this.state.image.width : 1000}
        height={this.state.image ? this.state.image.height : 1650}
      />
    );
  }
}

@connect(({ produce }) => ({ produce }))
class CutterCamCalImage extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };

  componentDidMount() {
    const image = new window.Image();
    image.src = this.props.produce.cutterImageSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.produce.cutterImageSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  render() {
    return <Image image={this.state.image} width={1000} height={1000} />;
  }
}

class HandLabel extends React.Component {
  state = {
    x: this.props.x,
    y: this.props.y,
    name: this.props.name,
  };

  onDragMove = e => {
    this.setState({
      x: e.target.attrs.x,
      y: e.target.attrs.y,
    });
    this.props.callBack(e.target.attrs.x, e.target.attrs.y);
  };

  render() {
    const { x, y, name } = this.state;
    return (
      <Label
        x={this.props.x}
        y={this.props.y}
        opacity={0.75} // 透明度
        draggable
        onDragMove={this.onDragMove}
      >
        <Tag
          fill="black"
          pointerDirection="down"
          pointerWidth={10}
          pointerHeight={10}
          lineJoin="round"
          shadowColor="black"
          shadowBlur={10}
          shadowOffset={10}
          shadowOpacity={0.5}
        />
        <Text
          text={name + '  ' + x + '  ' + y}
          fontFamily="Microsoft YaHei"
          fontSize={18}
          padding={5}
          fill="white"
        />
      </Label>
    );
  }
}

class PLable extends React.Component {
  state = {
    x: this.props.x,
    y: this.props.y,
    name: this.props.name,
  };

  onDragMove = e => {
    this.setState({
      x: e.target.attrs.x,
      y: e.target.attrs.y,
    });
    this.props.callBack(e.target.attrs.x, e.target.attrs.y);
  };

  render() {
    const { x, y, name } = this.state;
    return (
      <Label
        x={this.props.x}
        y={this.props.y}
        opacity={0.75} // 透明度
        draggable
        onDragMove={this.onDragMove}
      >
        <Tag
          fill="black"
          pointerDirection="up"
          pointerWidth={10}
          pointerHeight={10}
          lineJoin="round"
          shadowColor="black"
          shadowBlur={10}
          shadowOffset={10}
          shadowOpacity={0.5}
        />
        <Text
          text={name + '  ' + x + '  ' + y}
          fontFamily="Microsoft YaHei"
          fontSize={18}
          padding={5}
          fill="white"
        />
      </Label>
    );
  }
}

@connect(({ ds, os, produce }) => ({ ds, os, produce }))
@Form.create()
class Produce extends Component {
  state = {
    btnName: '暂停上料',
    searchId: 0, // 搜索框的搜索id号
    cutTopEdge: 15, // 第一刀留边宽度
    cutLeftEdge: 15, // 第二刀留边宽度
    cutBottomEdge: 15, // 第三刀留边宽度
    cutRightEdge: 15, // 第四刀留边宽度
    widthAdjustValue: 0, // 人工标注尺寸的时候,宽度调整阈值
    heightAdjustValue: 0, // 人工标注尺寸的手,高度调整阈值
    p7: { name: '左上角', x: 30, y: 30 },
    p8: { name: '内框旋转,向下顺时针,向上逆时针', x: 300, y: 300 },
    innerBoardAngle: 0, //内板尺寸标注的角度
    p1: { name: '上板左上角', x: 50, y: 100 },
    p2: { name: '上板旋转,向右顺时针', x: 250, y: 250 },
    p3: { name: '下板左上角', x: 50, y: 700 },
    p4: { name: '下板旋转,向右顺时针', x: 250, y: 750 },
    p5: { name: '下板左上角', x: 50, y: 900 },
    p6: { name: '下板旋转,向右顺时针', x: 250, y: 1050 },
    upAngle: 0, // 上板旋转角度
    downAngle: 0, // 下板旋转角度
    groundAngle: 0,
  };

  cutterBeginCheckPass = e => {
    const { dispatch } = this.props;
    this.closeCutterCheckModal();
    dispatch({
      type: 'produce/cutterBeginCheckPass',
    });
  };

  disableCalcImage = () => {
    const { dispatch } = this.props;
    const { btnName } = this.state;
    if (btnName == '暂停上料') {
      this.setState({
        btnName: '打开上料',
      });
      dispatch({
        type: 'produce/disableCalcImage',
        payload: false,
      });
    } else {
      this.setState({
        btnName: '暂停上料',
      });
      dispatch({
        type: 'produce/disableCalcImage',
        payload: true,
      });
    }
  };

  reCalcFirstBoard = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/reCalcFirstBoard',
    });
  };

  changeOrder = e => {
    const { dispatch } = this.props;
    const { workingOrder } = this.props.os;
    this.setState({
      cutTopEdge: workingOrder[0].topEdge,
      cutLeftEdge: workingOrder[0].leftEdge,
      cutBottomEdge: workingOrder[0].bottomEdge,
      cutRightEdge: workingOrder[0].rightEdge,
    });
    dispatch({
      type: 'produce/clickChangeOrder',
      payload: workingOrder[0],
    });
  };

  handLabelTwoBoxes = e => {
    const { dispatch } = this.props;
    const { p1, p3, upAngle, downAngle } = this.state;
    dispatch({
      type: 'produce/clearLabelTwoBoxesModalState',
    });
    dispatch({
      type: 'produce/handLabelTwoBoxes',
      payload: {
        upBoxInfo: [[p1.x, p1.y], -upAngle], // opencv中顺时针是负数,角度
        downBoxInfo: [[p3.x, p3.y], -downAngle], // opencv中顺时针是负数,角度
      },
    });
    this.setState({ p1: { ...p1, x: 50, y: 100 } });
  };

  handLabelThreel = () => {
    const { dispatch } = this.props;
    const { p1, p3, p5, upAngle, downAngle, groundAngle } = this.state;
    this.closeVisionCheckThree();
    dispatch({
      type: 'produce/handLabelThree',
      payload: {
        up_box_info: [[p1.x, p1.y], -upAngle], // opencv中顺时针是负数,角度
        down_box_info: [[p3.x, p3.y], -downAngle], // opencv中顺时针是负数,角度
        ground_box_info: [[p5.x, p5.y], -groundAngle],
      },
    });
  };
  closeVisionCheckThree = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/closevisionCheckThree',
    });
  };

  closeCutterCheckModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/closeCutterCheckModal',
    });
  };

  cutterFinalCutBoard = e => {
    this.closeCutterCheckModal();
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/cutterFinalCutBoard',
    });
  };

  cutterFinalCheckAgain = e => {
    const { dispatch } = this.props;
    this.closeCutterCheckModal();
    dispatch({
      type: 'produce/cutterFinalCheckAgain',
    });
  };

  cutterBeginCheckAgain = e => {
    const { dispatch } = this.props;
    this.closeCutterCheckModal();
    dispatch({
      type: 'produce/cutterBeginCheckAgain',
    });
  };

  reHandLabelTwoBoxes = e => {
    const { dispatch } = this.props;
    this.colseCutLineModal();
    dispatch({
      type: 'produce/reHandLabelTwoBoxes',
    });
  };

  colseCutLineModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/colseCutLineModal',
    });
  };

  clickCutBoard = e => {
    const { dispatch } = this.props;
    const { cutTopEdge, cutLeftEdge, cutBottomEdge, cutRightEdge } = this.state;
    this.closeTotalModal();
    dispatch({
      type: 'produce/clickCutBoard',
      payload: [cutTopEdge, cutLeftEdge, cutBottomEdge, cutRightEdge],
    });
  };

  changeWidthValue = value => {
    const { dispatch } = this.props;
    this.setState({
      widthAdjustValue: value,
    });
  };

  changeHeightValue = value => {
    const { dispatch } = this.props;
    this.setState({
      heightAdjustValue: value,
    });
  };

  onAfterSizeChange = () => {
    const { widthAdjustValue, heightAdjustValue } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/adjustHandBoardSize',
      payload: [widthAdjustValue, heightAdjustValue],
    });
  };
  // 两个框的时候调整了标注尺寸
  onAfterSizeChangeTwoBox = e => {
    const { widthAdjustValue, heightAdjustValue } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/adjustHandBoardSizeTwoBox',
      payload: [widthAdjustValue, heightAdjustValue],
    });
  };

  clickResetCutterSelf = e => {
    const { dispatch } = this.props;
    this.closeCutterCheckModal();
    this.closeMainAlarmInfoModal();
    dispatch({
      type: 'produce/clickResetCutterSelf',
    });
  };

  closeMainAlarmInfoModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/closeMainAlarmInfoModal',
    });
  };

  closeResetModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/closeResetModal',
    });
  };

  // 界面上点击了总复位按钮
  clickResetAll = e => {
    const { dispatch } = this.props;
    const { btnResetAllClicked } = this.props.produce;
    this.closeMainAlarmInfoModal();
    if (!btnResetAllClicked) {
      dispatch({
        type: 'produce/updateResetAllBtnClick',
        payload: true,
      });
      dispatch({
        type: 'produce/clickResetAll',
      });
    }
  };

  // 测试新功能
  testNewFunction = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/testNewFunction',
    });
  };

  // 点击历史记录的逻辑
  clickHistory = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'os/clickHistory',
    });
  };

  // 点击搜索之后的逻辑
  clickSearch = e => {
    const { dispatch } = this.props;
    const { searchId } = this.state;
    dispatch({
      type: 'os/searchOrder',
      payload: searchId,
    });
  };

  // 搜索下拉框的值改变的时候searchId会跟着变.
  onOfflineRadioChange = e => {
    const { dispatch } = this.props;
    if (e.target.value == 'start') {
      this.offlineStart();
    } else {
      this.offlineStop();
    }
  };

  // 离线上料启动
  offlineStart = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/offlineStart',
    });
  };

  offlineStop = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/offlineStop',
    });
  };

  offlineReset = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/offlineReset',
    });
  };

  offlineSwitchThrowBoard = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/offlineSwitchThrowBoard',
    });
  };

  offlineAllowCatchBoard = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/offlineAllowCatchBoard',
    });
  };

  offlineAllowTakeBoard = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/offlineAllowTakeBoard',
    });
  };

  offlinePutBoardFinish = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/offlinePutBoardFinish',
    });
  };

  offlineHandPutBoardConfirm = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/offlineHandPutBoardConfirm',
    });
  };

  offlineCarIsInPlace = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ds/offlineCarIsInPlace',
    });
  };

  clickStartProduce = e => {
    const { dispatch } = this.props;
    const { btnStartClicked } = this.props.produce;
    const { workingOrder } = this.props.os;
    if (!btnStartClicked) {
      dispatch({
        type: 'produce/updateStartProduceBtn',
        payload: true,
      });

      this.setState({
        cutTopEdge: workingOrder[0].topEdge,
        cutLeftEdge: workingOrder[0].leftEdge,
        cutBottomEdge: workingOrder[0].bottomEdge,
        cutRightEdge: workingOrder[0].rightEdge,
      });
      dispatch({
        type: 'produce/clickStartProduce',
        payload: workingOrder[0],
      });
    }
  };

  closeTotalModal = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/closeTotalModal',
    });
  };

  clickStopProduce = e => {
    const { dispatch } = this.props;
    this.closeTotalModal();
    dispatch({
      type: 'produce/clickStopProduce',
    });
  };

  boardBack = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/boardBack',
    });
  };

  reGetImageProduce = e => {
    const { dispatch } = this.props;
    this.closeTotalModal();
    dispatch({
      type: 'produce/reGetImageProduce',
    });
  };

  totalBoardIsOk = e => {
    const { dispatch } = this.props;
    this.closeTotalModal();
    dispatch({
      type: 'produce/totalBoardIsOk',
    });
  };

  clearBoardSizeCheckModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/clearBoardSizeCheckModal',
    });
  };

  nextBoardRes = e => {
    const { dispatch } = this.props;
    this.clearBoardSizeCheckModal();
    dispatch({
      type: 'produce/nextBoardRes',
    });
  };

  lastBoardRes = e => {
    const { dispatch } = this.props;
    this.clearBoardSizeCheckModal();
    dispatch({
      type: 'produce/lastBoardRes',
    });
  };

  keepOkSize = e => {
    const { dispatch } = this.props;
    this.clearBoardSizeCheckModal();
    dispatch({
      type: 'produce/keepOkSize',
    });
  };

  handInnerBoardSize = e => {
    const { dispatch } = this.props;
    this.clearBoardSizeCheckModal();
    dispatch({
      type: 'produce/handInnerBoardSize',
    });
  };

  clearHandBoardSizeState = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/clearHandBoardSizeState',
    });
  };

  // 标注尺寸确认OK
  handInnerBoardSizeIsOk = e => {
    const { dispatch } = this.props;
    const { p7, innerBoardAngle } = this.state;
    // 把调整的尺寸归0
    this.setState({
      widthAdjustValue: 0,
      heightAdjustValue: 0,
    });
    this.clearHandBoardSizeState();
    dispatch({
      type: 'produce/handInnerBoardSizeIsOk',
      payload: [[p7.x, p7.y], -innerBoardAngle],
    });
  };

  onAfterEdgeChange = e => {
    const { cutTopEdge, cutLeftEdge, cutBottomEdge, cutRightEdge } = this.state;
    const { dispatch } = this.props;
    const { isReturned } = this.props.produce;
    if (isReturned) {
      dispatch({
        type: 'produce/waitReturn',
        payload: false,
      });
      dispatch({
        type: 'produce/getCutLinesAfterEdgeChange',
        payload: [cutTopEdge, cutLeftEdge, cutBottomEdge, cutRightEdge],
      });
    }
  };

  closeErrorInfoModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/closeErrorInfoModal',
    });
  };

  closeProduceStartModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/closeProduceStartModal',
    });
  };
  openCutterFinalCheckDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/openCutterFinalCheckDir',
    });
  };
  openCutterFinalResDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/openCutterFinalResDir',
    });
  };

  closeDisplayStatus = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/closeDisplayStatus',
    });
  };
  handDisplayStatus = e => {
    const { dispatch } = this.props;
    this.closeDisplayStatus();
    dispatch({
      type: 'produce/handDisplayStatus',
    });
  };
  offlineModeBoard = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/offlineModeBoard',
    });
  };

  render() {
    const gridStyle = {
      width: '20%',
      textAlign: 'left',
    };
    const gridStyle2 = {
      width: '40%',
      textAlign: 'left',
    };

    const {
      workingInfo,
      errorInfo,
      errorInfoModalVisble,
      totalBoardSrc, // 展示totalBoardSrc的原图
      totalBoardErrorModalVisible, // totalBoardError提示框是否显示
      totalBoardErrorInfo, // totalBoardError的提示消息
      boardSize, // 计算的板的尺寸
      inputSize, // 录入的尺寸
      boardCalcError, //识别误差
      boardSizeCheckModalVisible, // 尺寸确认框是否显示
      boardSizeHandLabelModalVisible, // 内板尺寸标注确认框
      handLabelSize, // 标注的尺寸像素,
      labelBoardSizeMm, // 标注的尺寸毫米
      cutLineCheckModalVisible, // 切线图确认框,可调整留边宽度
      calcResInfo, // 计算的结果信息
      isReturned, // 检验是否返回的标志位
      handAnnotatedModalVisble, // 切线标注框是否显示
      labelTwoBoxSizeMm, // 标注两个内板的尺寸
      labelTwoBoxSizePix, // 标注两个内板在前端显示的尺寸,根据高宽比缩放了的尺寸
      beginCheckModalVisible, // 铡刀起点检测,有一个灯管全黑的显示框
      cutterImageSrc, //铡刀提示显示的图片,
      cutterHintInfo, // 铡刀那里的提示消息.
      fontStart, // 铡刀那里的提示消息的颜色
      cutterAngleErrorModalVisible, //铡刀起点检测,角度调整之后依旧没有通过提示框.
      finalCheckModalVisible, // 铡刀终点检测,错误提示框.
      produceStartModalVisible, // 设备启动提示框
      resetModalVisible, // 设备复位提示框
      produceStartModalInfo, // 设备启动提示框的内容
      resetModalInfo, // 复位提示框的内容.
      btnResetAllClicked, // 复位按钮是否按下.
      cutLineSrc, // 切线图的图像源
      handTwoBoxesSrc, // 标注两个内板位置的图像源
      visibleDisplayStatus, //produceInfo信息提示框
      produceDisplayStatus, //produceInfo信息显示颜色
      produceInfo, //首板尺寸数据对比
      visionCheckThree, // 三拼板标注框是否显示
      handThreeBoxesSrc, // 标注三个内板位置的图像源
      labelThreeBoxSizePix, //  标注三个内板在前端显示的尺寸,根据高宽比缩放了的尺寸
      labelThreeBoxSizeMm, // 标注三个内板的尺寸
    } = this.props.produce;
    const {
      btnName,
      p7,
      p8,
      innerBoardAngle,
      widthAdjustValue,
      heightAdjustValue,
      cutTopEdge,
      cutLeftEdge,
      cutBottomEdge,
      cutRightEdge,
      p1,
      p2,
      p3,
      p4,
      p5,
      p6,
      upAngle,
      downAngle,
      groundAngle,
    } = this.state;
    const { getFieldDecorator } = this.props.form;
    const {
      offlineZmcStates,
      camZmcStates,
      cbjZmcStates,
      cutterZmcStates,
      cameraGroupStates,
      autoState,
      mainAlarmInfo, // 铡刀总控制器的报警信息框
      offlineAlarmInfo, // 离线上料的报警信息框
      mainAlarmInfoVisible, // 底层报警提示框是否显示
      offlineAlarmInfoVisible, // 你先上料的提示框是否显示
      offlineMode,
      offlineRadioDefault,
    } = this.props.ds;
    const { totalOrders, workingOrder } = this.props.os; // 工单数据
    const { Option } = Select;
    const children = [];
    for (let i = 0; i < totalOrders.length; i++) {
      children.push(<Option key={i.toString() + i}>{totalOrders[i]['order_id']}</Option>);
    }
    const RadioGroup = Radio.Group;

    return (
      <>
        <Row style={{ display: 'flex', alignItems: 'stretch' }}>
          <Col span={8}>
            <Card title="离线上料状态" style={{ height: '100%' }}>
              <Row style={{ display: 'flex', alignItems: 'center', fontSize: 16 }}>
                <span style={{ marginRight: 20 }}>连接</span>
                {offlineZmcStates.online ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
                <span style={{ marginRight: 5, marginLeft: 15 }}>状态</span>
                {offlineZmcStates.rs ? (
                  <font style={{ color: '#FF0000' }}>急停中</font>
                ) : offlineZmcStates.run ? (
                  <font style={{ color: '#00FF00' }}>运行中</font>
                ) : (
                  <font style={{ color: '#112233' }}>待机</font>
                )}
                <RadioGroup
                  onChange={this.onOfflineRadioChange}
                  style={{ marginLeft: 30 }}
                  value={offlineRadioDefault}
                >
                  <Radio value="start" disabled={offlineZmcStates.run || offlineZmcStates.rs}>
                    启动
                  </Radio>
                  <Radio value="stop">停止</Radio>
                </RadioGroup>
                <Button
                  onClick={this.offlineReset}
                  disabled={offlineZmcStates.run}
                  style={{ marginLeft: 10 }}
                >
                  复位
                </Button>
              </Row>
              <Row
                style={{ marginTop: '15px', display: 'flex', alignItems: 'center', fontSize: 16 }}
              >
                <span style={{ marginRight: 5 }}>连线模式</span>
                <RadioGroup
                  onChange={this.onOfflineModeRadioChange}
                  style={{ marginLeft: 15 }}
                  value={offlineMode}
                >
                  <Radio value="auto">自动</Radio>
                  <Radio value="manual">手动</Radio>
                </RadioGroup>
              </Row>
              <Row
                style={{ marginTop: '15px', display: 'flex', alignItems: 'center', fontSize: 16 }}
              >
                <span style={{ marginRight: 5 }}>放板模式</span>
                <RadioGroup
                  onChange={this.onThrowModeRadioChange}
                  style={{ marginLeft: 15 }}
                  value={offlineZmcStates.throwMode}
                >
                  <Radio value="throw">丢板</Radio>
                  <Radio value="put">放板</Radio>
                </RadioGroup>
              </Row>
              <Row
                style={{ marginTop: '15px', display: 'flex', alignItems: 'center', fontSize: 16 }}
              >
                <Button onClick={this.offlineAllowCatchBoard}>允许抓板</Button>
                <Button onClick={this.offlineAllowTakeBoard} style={{ marginLeft: 10 }}>
                  允许下料
                </Button>
                <Button onClick={this.offlinePutBoardFinish} style={{ marginLeft: 10 }}>
                  放板完成
                </Button>
                <Button onClick={this.offlineHandPutBoardConfirm} style={{ marginLeft: 10 }}>
                  手动放板
                </Button>
                {/* <Button onClick={this.offlineCarIsInPlace} style={{ marginLeft: 10 }}>
                  小车到位
                </Button> */}
              </Row>
            </Card>
          </Col>
          <Col span={8} style={{ marginLeft: 10 }}>
            <Card
              title="分板线状态"
              style={{ height: '100%' }}
              extra={
                <>
                  <Button
                    id="btnClickAuto"
                    onClick={this.clickStartProduce}
                    disabled={
                      autoState ||
                      camZmcStates.rs ||
                      camZmcStates.run ||
                      cbjZmcStates.rs ||
                      cbjZmcStates.run ||
                      cutterZmcStates.rs ||
                      cutterZmcStates.run
                    }
                  >
                    启动
                  </Button>
                  <Button
                    style={{ marginLeft: 15 }}
                    onClick={this.clickStopProduce}
                    disabled={!cbjZmcStates.run && !camZmcStates.run && !cutterZmcStates.run}
                  >
                    停止
                  </Button>
                  <Button
                    style={{ marginLeft: 15 }}
                    onClick={this.clickResetAll}
                    disabled={cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run}
                  >
                    总复位
                  </Button>
                  <Button
                    style={{ marginLeft: 15 }}
                    onClick={this.clickResetCutterSelf}
                    disabled={!cutterZmcStates.rs || cutterZmcStates.run}
                  >
                    铡刀复位
                  </Button>
                </>
              }
            >
              <Row style={{ display: 'flex', alignItems: 'center', fontSize: 16 }}>
                <span style={{ marginRight: 20, width: '50px' }}>上料</span>
                {camZmcStates.online ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
                <span style={{ marginRight: 5, marginLeft: 20 }}>状态</span>
                {camZmcStates.rs ? (
                  <font style={{ color: '#FF0000' }}>急停中</font>
                ) : camZmcStates.run ? (
                  <font style={{ color: '#00FF00' }}>运行中</font>
                ) : (
                  <font style={{ color: '#112233' }}>待机</font>
                )}

                <span style={{ marginLeft: 50, width: '110px' }}>中相机</span>
                {cameraGroupStates[1] ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
              </Row>
              <Row style={{ display: 'flex', alignItems: 'center', fontSize: 16, marginTop: 15 }}>
                <span style={{ marginRight: 20, width: '50px' }}>裁切</span>
                {cbjZmcStates.online ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
                <span style={{ marginRight: 5, marginLeft: 20 }}>状态</span>
                {camZmcStates.rs ? (
                  <font style={{ color: '#FF0000' }}>急停中</font>
                ) : camZmcStates.run ? (
                  <font style={{ color: '#00FF00' }}>运行中</font>
                ) : (
                  <font style={{ color: '#112233' }}>待机</font>
                )}
                <span style={{ marginLeft: 50, width: '110px' }}>右相机</span>
                {cameraGroupStates[1] ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
              </Row>
              <Row style={{ display: 'flex', alignItems: 'center', fontSize: 16, marginTop: 15 }}>
                <span style={{ marginRight: 20, width: '50px' }}>铡刀</span>
                {cutterZmcStates.online ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
                <span style={{ marginRight: 5, marginLeft: 20 }}>状态</span>
                {cutterZmcStates.rs ? (
                  <font style={{ color: '#FF0000' }}>急停中</font>
                ) : cutterZmcStates.run ? (
                  <font style={{ color: '#00FF00' }}>运行中</font>
                ) : (
                  <font style={{ color: '#112233' }}>待机</font>
                )}
                <span style={{ marginLeft: 50, width: '110px' }}>铡刀1号相机</span>
                {cameraGroupStates[1] ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
              </Row>
              <Row style={{ display: 'flex', alignItems: 'center', fontSize: 16, marginTop: 15 }}>
                <span style={{ marginRight: 20, width: '50px' }}>左相机</span>
                {cameraGroupStates[0] ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
                <span style={{ marginLeft: 140, width: '110px' }}>铡刀2号相机</span>
                {cameraGroupStates[1] ? (
                  <CircleState color="green" size={18} />
                ) : (
                  <CircleState color="red" size={18} />
                )}
              </Row>
            </Card>
          </Col>
          <Col span={8} />
        </Row>
        <Card title="工单管理" style={{ marginTop: 5 }} extra={
          <>
            <div style={{marginRight:500}} >
              <span style={{ marginRight: 5 }}>输入工单Id:</span>
              <Select
                showSearch
                style={{ width: 200 }}
                optionFilterProp="children"
                onChange={this.onChange}
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                {children}
              </Select>
              <Button onClick={this.clickSearch} style={{ marginLeft: 10, marginRight: 10 }}>
                搜索
              </Button>
              <Button onClick={this.clickHistory}>历史记录</Button>
              <Button style={{ marginLeft: 10 }} onClick={this.reCalcFirstBoard}>
                重新做首板
              </Button>
              <Button
                style={{ marginLeft: 8 }}
                onClick={this.changeOrder}
                disabled={
                  !autoState && !cbjZmcStates.run && !camZmcStates.run && !cutterZmcStates.run
                }
              >
                更换工单
              </Button>
            <Button style={{marginLeft:100}} onClick={this.disableCalcImage}>{btnName}</Button>
            </div>
          </>
        }>
          <OrderForm order={workingOrder} />
        </Card>
        <Card
          title="自动作业循环"
          style={{ marginLeft: 210 }}
          extra={
            <>
              <Button
                id="btnClickAuto"
                onClick={this.clickStartProduce}
                disabled={
                  autoState ||
                  camZmcStates.rs ||
                  camZmcStates.run ||
                  cbjZmcStates.rs ||
                  cbjZmcStates.run ||
                  cutterZmcStates.rs ||
                  cutterZmcStates.run
                }
              >
                开始
              </Button>
              <Button
                style={{ marginLeft: 8 }}
                onClick={this.changeOrder}
                disabled={
                  !autoState && !cbjZmcStates.run && !camZmcStates.run && !cutterZmcStates.run
                }
              >
                更换工单
              </Button>
              <Button
                style={{ marginLeft: 15 }}
                onClick={this.clickStopProduce}
                disabled={!cbjZmcStates.run && !camZmcStates.run && !cutterZmcStates.run}
              >
                停止
              </Button>
              <Button
                style={{ marginLeft: 15 }}
                onClick={this.clickResetAll}
                disabled={cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run}
              >
                总复位
              </Button>
              <Button
                style={{ marginLeft: 15 }}
                onClick={this.clickResetCutterSelf}
                disabled={!cutterZmcStates.rs || cutterZmcStates.run}
              >
                铡刀复位
              </Button>
            </>
          }
        />
        <Card
          title="基本信息"
          style={{ marginLeft: 210 }}
          extra={
            <>
              
              {/* <Button onClick={this.testNewFunction} style={{marginLeft:20}}>测试新功能 </Button> */}
            </>
          }
        >
          <WorkingInfoForm workingInfo={workingInfo} />
        </Card>
        <Modal
          title={'作业过程中通信异常提示框'}
          visible={errorInfoModalVisble}
          width={window.screen.availWidth - 700}
          closable={true}
          onCancel={this.closeErrorInfoModal}
          footer={[
            <Button key="1" onClick={this.closeErrorInfoModal}>
              关闭提示框
            </Button>,
            <Button key="2" onClick={this.clickStopProduce} style={{ marginLeft: 15 }}>
              停止
            </Button>,
            <Button
              key="3"
              onClick={this.clickResetAll}
              style={{ marginLeft: 15 }}
              disabled={cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run}
            >
              总复位
            </Button>,
          ]}
        >
          <p>{errorInfo}</p>
        </Modal>
        <Modal
          title={<font style={{ color: '#FF0000', fontSize: 16 }}>物料检测未通过提示框 </font>}
          visible={totalBoardErrorModalVisible}
          width={window.screen.availWidth - 50}
          style={{ top: 0, left: 0, right: 0, bottom: 0 }}
          closable={true}
          footer={null}
        // closable={false}
        >
          <Card>
            <Card.Grid style={{ width: '70%', textAlign: 'left' }}>
              <Stage width={1000} height={1650}>
                <Layer>{totalBoardSrc ? <TotalBoardImage /> : <Image width={900} />}</Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: '30%', textAlign: 'left' }}>
              <Row>
                <p>{<font style={{ color: '#FF0000', fontSize: 16 }}>提示消息: </font>}</p>
                <span>{totalBoardErrorInfo}</span>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.boardBack}>板回退</Button>
                <Button onClick={this.reGetImageProduce} style={{ marginLeft: 20 }}>
                  重新拍照
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.clickStopProduce}>
                  停止
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.totalBoardIsOk}>人工确认物料OK</Button>
                <Button onClick={this.openTotalBoardErrorDir} style={{ marginLeft: 20 }}>
                  查看图片目录
                </Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={<font style={{ color: '#FF0000', fontSize: 16 }}>首板内板尺寸确认框 </font>}
          visible={boardSizeCheckModalVisible}
          width={window.screen.availWidth - 50}
          style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}
          footer={null}
          closable={false}
        >
          <Card>
            <Card.Grid style={{ width: '70%', textAlign: 'left' }}>
              <Stage width={1000} height={880}>
                <Layer>{totalBoardSrc ? <TotalBoardImage /> : <Image width={1000} />}</Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: '30%', textAlign: 'left' }}>
              <p>
                <font style={{ color: '#FF0000' }}>
                  首板尺寸确认框,请认真确认尺寸,本批次板将按照确认的尺寸进行识别
                </font>
              </p>
              <p>
                录入尺寸:&nbsp;&nbsp; (宽,高) = ({inputSize[0]},&nbsp;{inputSize[1]})
              </p>
              <p>
                识别尺寸:&nbsp;&nbsp; (宽,高) = ({boardSize[0]},&nbsp;{boardSize[1]})
              </p>
              <p>
                识别误差:&nbsp;&nbsp; (宽,高) = ({boardCalcError[0]},&nbsp;{boardCalcError[1]})
              </p>
              <Button type="primary" onClick={this.lastBoardRes}>
                上一个
              </Button>
              <Button style={{ marginLeft: 20 }} type="primary" onClick={this.nextBoardRes}>
                下一个
              </Button>
              <Button type="primary" style={{ marginLeft: 20 }} onClick={this.keepOkSize}>
                确认识别尺寸OK
              </Button>
              <Button type="primary" style={{ marginLeft: 20 }} onClick={this.handInnerBoardSize}>
                人工标注内板尺寸
              </Button>
            </Card.Grid>
          </Card>
        </Modal>
        +{' '}
        <Modal
          title={'首板内板尺寸误差确认框'}
          visible={visibleDisplayStatus}
          width={window.screen.availWidth - 700}
          closable={true}
          onCancel={this.closeResetModal}
          footer={[
            <Button key="1" onClick={this.handDisplayStatus}>
              继续作业
            </Button>,
            <Button
              key="3"
              style={{ marginLeft: 8 }}
              onClick={this.clickStopProduce}
              disabled={
                !autoState && !cbjZmcStates.run && !camZmcStates.run && !cutterZmcStates.run
              }
            >
              停止
            </Button>,

            <Button
              key="2"
              style={{ marginLeft: 8 }}
              onClick={this.clickResetAll}
              disabled={
                cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run || btnResetAllClicked
              }
            >
              总复位
            </Button>,
          ]}
        >
          <p>
            {produceDisplayStatus ? (
              <font style={{ color: '#FF0000', fontSize: 20 }}>{produceInfo}</font>
            ) : (
              <font style={{ color: '#000000', fontSize: 20 }}>{produceInfo}</font>
            )}
          </p>
        </Modal>
        <Modal
          title={'内板尺寸人工标注框'}
          visible={boardSizeHandLabelModalVisible}
          width={window.screen.availWidth - 50}
          closable={false}
          footer={null}
          style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}
        >
          <Card>
            <Card.Grid style={{ width: '70%' }}>
              <Stage width={1000} height={880}>
                <Layer>
                  {totalBoardSrc ? <TotalBoardImage /> : <Image width={900} />}
                  <Rect
                    width={handLabelSize[0]}
                    height={handLabelSize[1]}
                    strokeWidth={2}
                    stroke={'#dfe333'}
                    x={p7.x}
                    y={p7.y}
                    rotation={innerBoardAngle}
                  />
                  <HandLabel
                    x={30}
                    y={30}
                    key="p7"
                    name="左上角"
                    callBack={(x, y) => {
                      this.setState({ p7: { ...p7, x: x, y: y } });
                    }}
                  />
                  <HandLabel
                    x={300}
                    y={300}
                    key="p8"
                    name="内框旋转,向下顺时针,向上逆时针"
                    callBack={(x, y) => {
                      this.setState({ innerBoardAngle: (y - p8.y) / 20 });
                    }}
                  />
                </Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: '30%' }}>
              <div style={{ marginLeft: 16, marginRight: 16 }}>
                宽度调整
                <Slider
                  value={widthAdjustValue}
                  max={20}
                  min={-20}
                  onChange={value => this.changeWidthValue(value)}
                  onAfterChange={this.onAfterSizeChange}
                />
              </div>
              <div style={{ marginLeft: 16, marginRight: 16 }}>
                高度调整
                <Slider
                  value={heightAdjustValue}
                  max={20}
                  min={-20}
                  onChange={value => this.changeHeightValue(value)}
                  onAfterChange={this.onAfterSizeChange}
                />
              </div>
              <span style={{ marginLeft: 16, marginRight: 20, marginTop: 30 }}>
                <font style={{ color: '#0000FF', fontSize: 16 }}>标注尺寸:&nbsp;&nbsp;</font>
                (宽,高) = ({labelBoardSizeMm[0]},&nbsp;{labelBoardSizeMm[1]})
              </span>
              <div style={{ marginLeft: 16, marginRight: 16, marginTop: 20 }}>
                <Button onClick={this.handInnerBoardSizeIsOk}>标注内板尺寸OK</Button>
              </div>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={'切线图调整确认框'}
          visible={cutLineCheckModalVisible}
          width={window.screen.availWidth - 50}
          closable={false}
          footer={null}
          style={{ top: 0, left: 0, right: 0, bottom: 0 }}
        >
          <Card>
            <Card.Grid style={{ width: '65%' }}>
              <Stage width={1000} height={1650}>
                <Layer>{cutLineSrc ? <CutLineImage /> : <Image width={900} />}</Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: '35%', marginTop: 500 }}>
              <Row>
                <div style={{ marginLeft: 16, marginRight: 16 }}>
                  第一刀留边宽度
                  <Slider
                    disabled={!isReturned}
                    value={cutTopEdge}
                    max={45}
                    min={0}
                    onChange={value => this.setState({ cutTopEdge: value })}
                    onAfterChange={this.onAfterEdgeChange}
                  />
                </div>
                <div style={{ marginLeft: 16, marginRight: 16 }}>
                  第二刀留边宽度
                  <Slider
                    disabled={!isReturned}
                    value={cutLeftEdge}
                    max={45}
                    min={0}
                    onChange={value => this.setState({ cutLeftEdge: value })}
                    onAfterChange={this.onAfterEdgeChange}
                  />
                </div>
                <div style={{ marginLeft: 16, marginRight: 16 }}>
                  第三刀留边宽度
                  <Slider
                    disabled={!isReturned}
                    value={cutBottomEdge}
                    max={45}
                    min={0}
                    onChange={value => this.setState({ cutBottomEdge: value })}
                    onAfterChange={this.onAfterEdgeChange}
                  />
                </div>
                <div style={{ marginLeft: 16, marginRight: 16 }}>
                  第四刀留边宽度
                  <Slider
                    disabled={!isReturned}
                    value={cutRightEdge}
                    max={45}
                    min={0}
                    onChange={value => this.setState({ cutRightEdge: value })}
                    onAfterChange={this.onAfterEdgeChange}
                  />
                </div>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <span style={{ marginLeft: 16, marginRight: 20, marginTop: 30 }}>
                  <font style={{ color: '#0000FF', fontSize: 16 }}>识别信息:&nbsp;&nbsp;</font>
                  {calcResInfo}
                </span>
              </Row>

              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.clickCutBoard}>切板</Button>
                <Button onClick={this.boardBack} style={{ marginLeft: 20 }}>
                  板回退
                </Button>
                <Button onClick={this.reGetImageProduce} style={{ marginLeft: 20 }}>
                  重新拍照
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.clickStopProduce}>
                  停止
                </Button>
                <Button onClick={this.reHandLabelTwoBoxes} style={{ marginLeft: 20 }}>
                  重新标注
                </Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={'内板位置标注框'}
          visible={handAnnotatedModalVisble}
          width={window.screen.availWidth - 50}
          closable={false}
          footer={null}
          style={{ top: 0, left: 0, right: 0, bottom: 0 }}
        >
          <Card>
            <Card.Grid style={{ width: '65%' }}>
              <Stage width={1000} height={1650}>
                <Layer>
                  {handTwoBoxesSrc ? <TwoBoxesHandImage /> : <Image width={1000} />}
                  <Rect
                    width={labelTwoBoxSizePix[0]}
                    height={labelTwoBoxSizePix[1]}
                    strokeWidth={2}
                    stroke={'#dfe333'}
                    x={p1.x}
                    y={p1.y}
                    rotation={upAngle}
                  />
                  <Rect
                    width={labelTwoBoxSizePix[0]}
                    height={labelTwoBoxSizePix[1]}
                    strokeWidth={2}
                    stroke={'#dfe333'}
                    x={p3.x}
                    y={p3.y}
                    rotation={downAngle}
                  />

                  <PLable
                    x={p1.x}
                    y={p1.y}
                    key="p1"
                    name="1号左上角"
                    callBack={(x, y) => {
                      this.setState({ p1: { ...p1, x: x, y: y } });
                    }}
                  />
                  <PLable
                    x={250}
                    y={250}
                    key="p2"
                    name="1号旋转向下顺时针"
                    callBack={(x, y) => {
                      this.setState({ upAngle: (y - p2.y) / 20 });
                    }}
                  />
                  <PLable
                    x={50}
                    y={600}
                    key="p3"
                    name="2号左上角"
                    callBack={(x, y) => {
                      this.setState({ p3: { ...p3, x: x, y: y } });
                    }}
                  />
                  <PLable
                    x={250}
                    y={650}
                    key="p4"
                    name="2号旋转"
                    callBack={(x, y) => {
                      this.setState({ downAngle: (y - p4.y) / 20 });
                    }}
                  />
                </Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: '35%', marginTop: 500 }}>
              <Row style={{ marginLeft: 16, marginRight: 16 }}>
                <div>
                  宽度调整
                  <Slider
                    value={widthAdjustValue}
                    max={20}
                    min={-20}
                    onChange={value => this.changeWidthValue(value)}
                    onAfterChange={this.onAfterSizeChangeTwoBox}
                  />
                </div>
                <div>
                  高度调整
                  <Slider
                    value={heightAdjustValue}
                    max={20}
                    min={-20}
                    onChange={value => this.changeHeightValue(value)}
                    onAfterChange={this.onAfterSizeChangeTwoBox}
                  />
                </div>
                <span style={{ marginRight: 20, marginTop: 30 }}>
                  <font style={{ color: '#0000FF', fontSize: 16 }}>标注尺寸:&nbsp;&nbsp;</font>
                  (宽,高) = ({labelTwoBoxSizeMm[0]},&nbsp;{labelTwoBoxSizeMm[1]})
                </span>
              </Row>
              <Row style={{ marginTop: 20, marginLeft: 16 }}>
                <span style={{ marginRight: 20, marginTop: 30 }}>
                  <font style={{ color: '#0000FF', fontSize: 16 }}>识别信息:&nbsp;&nbsp;</font>
                  {calcResInfo}
                </span>
              </Row>

              <Row style={{ marginTop: 20, marginLeft: 16 }}>
                <Button onClick={this.handLabelTwoBoxes}>标注</Button>
                <Button onClick={this.boardBack} style={{ marginLeft: 20 }}>
                  板回退
                </Button>
                <Button onClick={this.reGetImageProduce} style={{ marginLeft: 20 }}>
                  重新拍照
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.clickStopProduce}>
                  停止
                </Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={'铡刀起点检测错误提示框'}
          visible={beginCheckModalVisible}
          width={window.screen.availWidth - 80}
          style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}
          closable={true}
          footer={null}
        >
          <Card>
            <Card.Grid style={{ width: '70%', textAlign: 'left' }}>
              <Stage width={1000} height={880}>
                <Layer>{cutterImageSrc ? <CutterCamCalImage /> : <Image width={800} />}</Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: '30%', textAlign: 'left' }}>
              <Row>
                <p>{<font style={{ color: '#FF0000', fontSize: 16 }}>提示消息: </font>}</p>
                <span>{cutterHintInfo}</span>
              </Row>
              <Row style={{ marginTop: 30 }}>
                <Button onClick={this.cutterBeginCheckPass}>人工确认检测通过</Button>
                <Button style={{ marginLeft: 20 }} onClick={this.cutterBeginCheckAgain}>
                  重新检测
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.openCutterBeginCheckDir}>
                  查看原图
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.openCutterCheckResDir}>
                  查看结果图
                </Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={'铡刀终点检测出错提示框'}
          visible={finalCheckModalVisible}
          width={window.screen.availWidth - 80}
          style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}
          closable={true}
          footer={null}
        >
          <Card>
            <Card.Grid style={{ width: '70%', textAlign: 'left' }}>
              <Stage width={1000} height={880}>
                <Layer>{cutterImageSrc ? <CutterCamCalImage /> : <Image width={800} />}</Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: '30%', textAlign: 'left' }}>
              <Row>
                <p>{<font style={{ color: '#FF0000', fontSize: 16 }}>提示消息: </font>}</p>、
                <p>
                  {fontStart ? (
                    <font style={{ color: '#FF0000', fontSize: 20 }}>{cutterHintInfo}</font>
                  ) : (
                    <font style={{ color: '#000000' }}>{cutterHintInfo}</font>
                  )}
                </p>
                {/* <span>{cutterHintInfo}</span> */}
              </Row>
              <Row style={{ marginTop: 30 }}>
                <Button onClick={this.cutterFinalCheckAgain}>重新检测</Button>
                <Button onClick={this.cutterFinalCutBoard} style={{ marginLeft: 20 }}>
                  人工确认铡板
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.openCutterFinalCheckDir}>
                  查看原图
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.openCutterFinalResDir}>
                  查看结果图
                </Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={'设备启动提示框'}
          visible={produceStartModalVisible}
          width={window.screen.availWidth - 700}
          closable={true}
          onCancel={this.closeProduceStartModal}
          footer={[
            <Button key="1" type="primary" onClick={this.closeProduceStartModal}>
              关闭启动提示框
            </Button>,
            <Button
              key="2"
              style={{ marginLeft: 15 }}
              onClick={this.clickStopProduce}
              disabled={
                !autoState && !cbjZmcStates.run && !camZmcStates.run && !cutterZmcStates.run
              }
            >
              停止
            </Button>,

            <Button
              key="3"
              style={{ marginLeft: 15 }}
              onClick={this.clickReset}
              disabled={cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run}
            >
              总复位
            </Button>,
          ]}
        >
          <p>{produceStartModalInfo}</p>
        </Modal>
        <Modal
          title={'复位提示框'}
          visible={resetModalVisible}
          width={window.screen.availWidth - 700}
          closable={true}
          onCancel={this.closeResetModal}
          footer={[
            <Button key="1" onClick={this.closeResetModal}>
              关闭复位提示框
            </Button>,
            <Button
              key="3"
              style={{ marginLeft: 8 }}
              onClick={this.clickStopProduce}
              disabled={
                !autoState && !cbjZmcStates.run && !camZmcStates.run && !cutterZmcStates.run
              }
            >
              停止
            </Button>,

            <Button
              key="2"
              style={{ marginLeft: 8 }}
              onClick={this.clickResetAll}
              disabled={
                cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run || btnResetAllClicked
              }
            >
              总复位
            </Button>,
          ]}
        >
          <p>{resetModalInfo}</p>
        </Modal>
        <Modal
          title={'底层报警信息提示框'}
          visible={mainAlarmInfoVisible}
          width={window.screen.availWidth - 700}
          closable={true}
          onCancel={this.closeMainAlarmInfoModal}
          footer={[
            <Button key="1" onClick={this.closeMainAlarmInfoModal}>
              关闭底层报警提示提示框
            </Button>,

            <Button
              key="2"
              style={{ marginLeft: 15 }}
              onClick={this.clickStopProduce}
              disabled={
                !autoState && !cbjZmcStates.run && !camZmcStates.run && !cutterZmcStates.run
              }
            >
              停止
            </Button>,
            <Button
              key="3"
              style={{ marginLeft: 15 }}
              onClick={this.clickResetAll}
              disabled={cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run}
            >
              总复位
            </Button>,
            <Button
              key="4"
              style={{ marginLeft: 15 }}
              onClick={this.clickResetCutterSelf}
              disabled={!cutterZmcStates.rs && cutterZmcStates.run}
            >
              铡刀复位
            </Button>,
          ]}
        >
          <p>{mainAlarmInfo}</p>
        </Modal>
        <Modal
          title={'三拼板标注框'}
          visible={visionCheckThree}
          width={window.screen.availWidth - 420}
          closable={false}
          footer={[]}
        >
          <Card>
            <Card.Grid style={{ width: '65%' }}>
              <Stage width={1200} height={1500}>
                <Layer>
                  {handThreeBoxesSrc ? <BoardImage width={800} /> : <Image width={800} />}
                  <Rect
                    width={labelThreeBoxSizePix[0]}
                    height={labelThreeBoxSizePix[1]}
                    strokeWidth={2}
                    stroke={'#dfe333'}
                    x={p1.x}
                    y={p1.y}
                    rotation={upAngle}
                  />
                  <Rect
                    width={labelThreeBoxSizePix[0]}
                    height={labelThreeBoxSizePix[1]}
                    strokeWidth={2}
                    stroke={'#dfe333'}
                    x={p3.x}
                    y={p3.y}
                    rotation={downAngle}
                  />
                  <Rect
                    width={labelThreeBoxSizePix[0]}
                    height={labelThreeBoxSizePix[1]}
                    strokeWidth={2}
                    stroke={'#dfe333'}
                    x={p5.x}
                    y={p5.y}
                    rotation={groundAngle}
                  />

                  <PLable
                    x={50}
                    y={100}
                    key="p1"
                    name="1号左上角"
                    callBack={(x, y) => {
                      this.setState({ p1: { ...p1, x: x, y: y } });
                    }}
                  />
                  <PLable
                    x={250}
                    y={250}
                    key="p2"
                    name="1号旋转向下顺时针"
                    callBack={(x, y) => {
                      this.setState({ up_angle: (y - p2.y) / 20 });
                    }}
                  />
                  <PLable
                    x={50}
                    y={600}
                    key="p3"
                    name="2号左上角"
                    callBack={(x, y) => {
                      this.setState({ p3: { ...p3, x: x, y: y } });
                    }}
                  />
                  <PLable
                    x={250}
                    y={650}
                    key="p4"
                    name="2号旋转"
                    callBack={(x, y) => {
                      this.setState({ down_angle: (y - p4.y) / 20 });
                    }}
                  />
                  <PLable
                    x={50}
                    y={900}
                    key="p5"
                    name="3号左上角"
                    callBack={(x, y) => {
                      this.setState({ p5: { ...p5, x: x, y: y } });
                    }}
                  />
                  <PLable
                    x={250}
                    y={1050}
                    key="p6"
                    name="3号旋转"
                    callBack={(x, y) => {
                      this.setState({ ground_angle: (y - p6.y) / 20 });
                    }}
                  />
                </Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: '35%', marginTop: 500 }}>
              <Row style={{ marginLeft: 16, marginRight: 16 }}>
                <div>
                  宽度调整
                  <Slider
                    value={widthAdjustValue}
                    max={20}
                    min={-20}
                    onChange={value => this.changeWidthValue(value)}
                    onAfterChange={this.onAfterSizeChangeTwoBox}
                  />
                </div>
                <div>
                  高度调整
                  <Slider
                    value={heightAdjustValue}
                    max={20}
                    min={-20}
                    onChange={value => this.changeHeightValue(value)}
                    onAfterChange={this.onAfterSizeChangeTwoBox}
                  />
                </div>
                <span style={{ marginRight: 20, marginTop: 30 }}>
                  <font style={{ color: '#0000FF', fontSize: 16 }}>标注尺寸:&nbsp;&nbsp;</font>
                  (宽,高) = ({labelThreeBoxSizeMm[0]},&nbsp;{labelThreeBoxSizeMm[1]})
                </span>
              </Row>
              <Row style={{ marginTop: 20, marginLeft: 16 }}>
                <span style={{ marginRight: 20, marginTop: 30 }}>
                  <font style={{ color: '#0000FF', fontSize: 16 }}>识别信息:&nbsp;&nbsp;</font>
                  {calcResInfo}
                </span>
              </Row>
              <Row style={{ marginTop: 20, marginLeft: 16 }}>
                <Button onClick={this.handLabelThreel}>标注</Button>
                <Button onClick={this.boardBack} style={{ marginLeft: 20 }}>
                  板回退
                </Button>
                <Button onClick={this.reGetImageProduce} style={{ marginLeft: 20 }}>
                  重新拍照
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.clickStopProduce}>
                  停止
                </Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
      </>
    );
  }
}

export default Produce;
